<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自适应宽高</title>
		<style>
			/* 尺寸问题：屏幕宽高比不一致，限定一个宽高范围
		min-width属性：最小宽度  [√]   min-height属性：最小高度
		max-width属性：最大宽度 【√】   max-height属性：最大高度
			 */
			
			
			
			
			
			div{
				width:80% ; /*默认宽度*/
				min-width: 500px; /*内容最小宽度是500px,不能改变*/
				max-width: 600px; /*页面尺寸：最小是500px，最大600px，默认80%*/
				/*定好最小跟最大宽高，PC：80% 300px
				                    移动：500~600宽度[页面不变]  300px
									自适应
									*/
				height: 300px;
				background: #ffaaff;
			    color: white;
			} 
			
			/**
			 * html结构   外层div--、container    内存div--、box  写lorem
			 * css结构     .container样式：背景颜色#f0f0f0;
			 *                            padding:20px;
			 *                            文本居中；
			 *             .box样式：背景颜色#4caf50;
			 *                       文字颜色白色
			 *                       宽度60%
			 *                       宽度范围500~600px[页面不变]
			 *                       margin：auto;
			 */
		</style>
	</head>
	<body>
		<div >
			<div >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quam magni aperiam voluptatem qui enim! Maxime molestiae vero minima quibusdam, sequi minus, asperiores eveniet itaque repellat ad magnam est, necessitatibus incidunt.</div>
		</div>

	</body>
</html>